<!doctype html>
<html lang="zh">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>预制菜溯源系统</title>
      <link rel="stylesheet" href="../static/css/style.css">
       <style>
           body {
               font-family: 宋体;
           }

           .container {
               max-width: 1080px;
               margin: 20px auto;
               padding: 20px;
               background-color: #ffffff;
               border-radius: 20px;
               box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
           }

           h1 {
               text-align: center;
           }

           #form-area {
               display: none; /* Initially hidden */
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background-color: rgba(0, 0, 0, 0.5);
               z-index: 1000;
               justify-content: center;
               align-items: center;
           }

           .form-container {
               background: white;
               padding: 20px;
               border-radius: 8px;
               width: 400px;
               box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
           }

           table{
               border-collapse: collapse;
               width: 100%;
               font-size: 16px;
               align-items: center;
               background-color: #fff;
           }
           th, td{
               border: 1px solid #c5c5c5;
               padding: 8px;
               width: 100px;
               text-align: center;
               align-items: center;
               border-left: 0;
               border-right: 0;
               color: #000000;
           }

           .status {
               width: 100px;
               height: 20px;
               border-radius: 5px;
               text-align: center;
               color: white;
           }

           .status-normal {
               color: #ffffff;
               background-color: #0fd5b8;
               margin: 0 auto;
               width: 55px;
               height: 28px;
               border-radius: 10px;
               /*padding: 2px 0 2px 0;*/
           }

           .status-pending {
               color: #ffffff;
               background-color: #ff5a5f;
               margin: 0 auto;
               width: 55px;
               height: 28px;
               border-radius: 10px;
           }

           .button {
               background-color: #0fc4d5;
               color: white;
               border: none;
               padding: 5px 10px;
               cursor: pointer;
               border-radius: 5px;
               font-size: 14px;
               height: 33px;
               font-family: 宋体;
               margin: 0 5px;
           }

           .button:hover {
               background-color: #13a6e5;
           }

           .close-btn {
               background: red;
               border: none;
               color: white;
               padding: 4px 8px;
               border-radius: 5px;
               cursor: pointer;
           }

           .contract-content {
               max-height: 40px;  /* 调整为固定高度 */
               line-height: 20px; /* 设置行高 */
               overflow: hidden;
               text-overflow: ellipsis;
               display: -webkit-box;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               cursor: pointer;
               word-break: break-all; /* 添加自动换行 */
           }

           /* 弹窗样式 */
           .modal {
               display: none;
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background-color: rgba(0, 0, 0, 0.5);
               z-index: 1000;
           }

           .modal-content {
               position: relative;
               background-color: #fff;
               margin: 15% auto;
               padding: 20px;
               width: 70%;
               max-width: 700px;
               border-radius: 5px;
           }

           .close {
               position: absolute;
               right: 10px;
               top: 5px;
               font-size: 24px;
               cursor: pointer;
               color: #aaa;
           }

           .close:hover {
               color: #000;
           }

           .modal-title {
               margin-bottom: 15px;
               padding-bottom: 10px;
               border-bottom: 1px solid #eee;
           }
       </style>
   </head>
     <body>
<div id="loading"><div id="loading-center"></div></div>
      <div class="wrapper">
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="{{url_for('index')}}">
               <img src="../static/images/logo.png" class="img-fluid" alt="">
               <span>预制菜溯源系统</span>
               </a>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">

                     <li >
                        <a href="{{url_for('index')}}" class="iq-waves-effect"><i class="ri-home-4-fill"></i><span>首页</span></a>
                     </li>
                     <li>
                        <a href="{{url_for('trace_select')}}" class="iq-waves-effect"><i class="ri-search-2-line"></i><span>溯源查询</span></a>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-shield-user-fill"></i><span>个人中心 </span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('change_form')}}">资料编辑</a></li>
                              <li><a href="{{url_for('change_passwd')}}">修改密码</a></li>
                        </ul>
                     </li>

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-settings-fill"></i>用户管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('my_user')}}">我的用户</a></li>
                              <li><a href="{{url_for('add_user')}}">添加用户</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'transporter') %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-todo-fill"></i>运输管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('transport_test')}}">运输信息管理</a></li>
                              <li><a href="{{url_for('transport_show')}}">运输路线管理</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and user.role == 'admin' %}
                     <li class="active">
                        <a href="{{url_for('product_manage')}}" class="iq-waves-effect"><i class="ri-file-edit-fill"></i><span>合约管理</span></a>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'producer') %}
                     <li>
                        <a href="javascript:void(0);"><i class="ri-stack-fill"></i>产品信息录入</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('raw_material')}}">原材料录入</a></li>
                              <li><a href="{{url_for('production_record')}}">生产记录创建</a></li>
                              <li><a href="{{url_for('product_generation')}}">产品生成</a></li>
                        </ul>
                     </li>
                     {% endif %}
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
         <div class="iq-top-navbar">
            <div class="iq-navbar-custom">

               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar">
                     <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="请输入搜索内容...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                     </form>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">

                        <li>
                           <a href="{{url_for('AI')}}">AI对话</a>
                        </li>

                        <li class="nav-item">
                           <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">所有通知<small class="badge  badge-light float-right pt-1">4</small></h5>
                                    </div>

                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">艾玛·沃森·比尼。</h6>
                                             <small class="float-right font-size-12">刚刚</small>
                                             <p class="mb-0">消息</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">新客户加入</h6>
                                             <small class="float-right font-size-12">5天前</small>
                                             <p class="mb-0">系统管理员</p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                     <li>
                        <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                           <img src="..//static/images/user1.jpg" class="img-fluid rounded mr-3" alt="user">
                           <div class="caption">
                              {% if user %}
                                  <h6 class="mb-0 line-height">{{ user.username }}</h6>
                                  <span class="font-size-12">{{ user.role }}</span>
                              {% else %}
                                  <h6 class="mb-0 line-height">未登录</h6>
                                  <span class="font-size-12">游客</span>
                              {% endif %}
                           </div>
                        </a>
                        <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <h5 class="mb-0 text-white line-height">你好-{{ user.username }}</h5>
                                 </div>
                                 <a href="{{url_for('change_form')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-file-user-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">个人中心</h6>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="{{url_for('change_passwd')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-profile-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">修改密码</h6>
                                       </div>
                                    </div>
                                 </a>


                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="bg-primary iq-sign-btn" href="{{ url_for('logout') }}" role="button">退出登录<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </nav>

            </div>
         </div>
         <!-- TOP Nav Bar END -->
             <div class="container">
             <h1>合约管理</h1>
             <button id="add-product-btn" class="button">添加合约（测试）</button>
                 <br>
                 <br>
             <h3>合约列表</h3>
             <table id="product-table" align="center">
                 <tr>
                     <th>合约ID</th>
                     <th>合约标题</th>
                     <th>合约内容</th>
                     <th>发送方ID</th>
                     <th>接收方ID</th>
                     <th>创建时间</th>
                     <th>合约状态</th>
                     <th>操作</th>
                 </tr>
                 {% for contract in contracts %}
                 <tr>
                     <td>{{ contract.id }}</td>
                     <td>{{ contract.title }}</td>
                     <td>
                         <div class="contract-content" 
                              data-title="{{ contract.title }}"
                              data-content="{{ contract.content }}"
                              onclick="showModal(this.dataset.title, this.dataset.content)">
                             {{ contract.content }}
                         </div>
                     </td>
                     <td>{{ contract.sender_id }}</td>
                     <td>{{ contract.receiver_id }}</td>
                     <td>{{ contract.created_at }}</td>
                     <td>
                         {% if contract.status == '通过' %}
                             <div class="status-normal">通过</div>
                         {% else %}
                             <div class="status-pending">未通过</div>
                         {% endif %}
                     </td>
                     <td>
                         <a href="{{ url_for('toggle_contract_status', contract_id=contract.id) }}" class="button" style="padding: 10px 10px;">
                             {% if contract.status == '通过' %}
                                 未通过
                             {% else %}
                                 通过
                             {% endif %}
                         </a>
                     </td>
                 </tr>
                 {% endfor %}
             </table>
                 <br>

                 <br>
             </div>

             <footer class="bg-white iq-footer">
                 <div class="container-fluid">
                     <div class="row">
                         <div class="col-lg-6">
                             <ul class="list-inline mb-0">
                                 <li class="list-inline-item"><a href="#">使用帮助</a></li>
                                 <li class="list-inline-item"><a href="#">进入官网</a></li>
                             </ul>
                         </div>
                         <div class="col-lg-6 text-right">
                             Copyright 2024 <a href="">预制菜溯源系统</a> 版权所有
                         </div>
                     </div>
                 </div>
             </footer>
          </div>
      </div>
 </body>



      <script src="../static/js/jquery.min.js"></script>
      <script src="../static/js/bootstrap.min.js"></script>
      <script src="../static/js/smooth-scrollbar.js"></script>
      <script src="../static/js/custom.js"></script>
      <script src="../static/js/laydate.js"></script>
       <script>
          lay('#version').html('-v'+ laydate.v);
          laydate.render({
             elem: '#date'
            ,range: true
            ,theme: '#2c9eae'
          });
         </script>

         <div id="contractModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal()">&times;</span>
                 <h3 class="modal-title" id="modalTitle"></h3>
                 <div id="modalContent"></div>
             </div>
         </div>

         <script>
         function showModal(title, content) {
             var modal = document.getElementById('contractModal');
             document.getElementById('modalTitle').textContent = title;
             document.getElementById('modalContent').innerHTML = content.replace(/\n/g, '<br>');
             modal.style.display = 'block';
         }

         function closeModal() {
             document.getElementById('contractModal').style.display = 'none';
         }

         // 点击模态框外部关闭
         window.onclick = function(event) {
             var modal = document.getElementById('contractModal');
             if (event.target == modal) {
                 modal.style.display = 'none';
             }
         }
         </script>

         <div id="form-area" class="modal">
             <div class="form-container">
                 <h3>添加新合约</h3>
                 <form id="contract-form">
                     <div style="margin-bottom: 15px;">
                         <label for="title">合约标题:</label><br>
                         <input type="text" id="title" name="title" required style="width: 100%; padding: 5px;">
                     </div>
                     
                     <div style="margin-bottom: 15px;">
                         <label for="content">合约内容:</label><br>
                         <textarea id="content" name="content" required style="width: 100%; height: 100px; padding: 5px;"></textarea>
                     </div>
                     
                     <div style="margin-bottom: 15px;">
                         <label for="sender_id">发送方ID:</label><br>
                         <input type="number" id="sender_id" name="sender_id" required style="width: 100%; padding: 5px;">
                     </div>
                     
                     <div style="margin-bottom: 15px;">
                         <label for="receiver_id">接收方ID:</label><br>
                         <input type="number" id="receiver_id" name="receiver_id" required style="width: 100%; padding: 5px;">
                     </div>
                     
                     <div style="text-align: center;">
                         <button type="submit" class="button">提交</button>
                         <button type="button" class="button" onclick="closeForm()" style="background-color: #ff5a5f;">取消</button>
                     </div>
                 </form>
             </div>
         </div>

         <script>
         document.getElementById('add-product-btn').addEventListener('click', function() {
             document.getElementById('form-area').style.display = 'flex';
         });

         function closeForm() {
             document.getElementById('form-area').style.display = 'none';
         }

         document.getElementById('contract-form').addEventListener('submit', function(e) {
             e.preventDefault();
             
             const formData = {
                 title: document.getElementById('title').value,
                 content: document.getElementById('content').value,
                 sender_id: document.getElementById('sender_id').value,
                 receiver_id: document.getElementById('receiver_id').value
             };
             
             fetch('/add_contract', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify(formData)
             })
             .then(response => response.json())
             .then(data => {
                 if(data.success) {
                     alert('合约添加成功！');
                     window.location.reload();
                 } else {
                     alert('合约添加失败：' + data.error);
                 }
             })
             .catch(error => {
                 alert('提交失败：' + error);
             });
         });
         </script>

</html>

